<!-- 车型添加 -->
<template>
  <div>
    <el-dialog
      :title="title"
      :visible="dialogVisible"
      width="40%"
      @close="close"
    >
      <el-form
        ref="form"
        :rules="rules"
        style="padding:20px"
        :model="rulesForm"
        label-width="120px"
      >
        <el-form-item
          label="车辆类型"
          prop="name"
        >
          <el-input
            v-model="rulesForm.name"
            placeholder="请输入车辆类型"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="应载重量"
          prop="allowableLoad"
        >
          <el-input
            v-model="rulesForm.allowableLoad"
            placeholder="请输入车载重量"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="应载体积"
          prop="allowableVolume"
        >
          <el-input
            v-model="rulesForm.allowableVolume"
            placeholder="请输入车型体积"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="长"
          prop="measureLong"
        >
          <el-input v-model="rulesForm.measureLong"></el-input>
        </el-form-item>
        <el-form-item
          label="宽"
          prop="measureWidth"
        >
          <el-input v-model="rulesForm.measureWidth"></el-input>
        </el-form-item>
        <el-form-item
          label="高"
          prop="measureHigh"
        >
          <el-input v-model="rulesForm.measureHigh"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button
            type="warning"
            @click="Confirm"
          >确 认</el-button>
          <el-button @click="close">取 消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
import { detail } from '@/api/transit'
export default {
  name: 'CarModelsAdd',
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    },
    id: {
      type: String,
      default: null
    }
  },
  data () {
    return {
      title: '',
      rulesForm: {
        allowableLoad: '', // 重量
        allowableVolume: '', // 体积
        name: '', // 车辆类型
        measureLong: 0.0, // 长
        measureWidth: 0.0, // 宽
        measureHigh: 0.0// 高
      },
      rules: {
        name: [{ required: true, message: '请输入车辆类型', trigger: 'blur' }],
        allowableLoad: [
          {
            required: true,
            message: '请输入车型载重',
            trigger: 'blur' },
          {
            trigger: 'blur',
            validator: (rule, value, callback) => {
              console.log(value)
              if (+value < 1 || +value > 100) {
                callback(new Error('请输入整数1-100之间'))
              } else {
                callback()
              }
            }
          }],
        allowableVolume: [{
          required: true,
          message: '请输入车型体积',
          trigger: 'blur'
        },
        {
          trigger: 'blur',
          validator: (rule, value, callback) => {
            if (+value < 1 || +value > 100) {
              console.log(1111)
              callback(new Error('请输入整数1-100之间'))
            } else {
              callback()
            }
          }
        }],
        measureLong: [{
          trigger: 'blur',
          validator: (rule, value, callback) => {
            if (+value > 100) {
              callback(new Error('长最多100'))
            } else {
              callback()
            }
          }
        }],
        measureWidth: [{
          trigger: 'blur',
          validator: (rule, value, callback) => {
            if (+value > 100) {
              callback(new Error('宽最多100'))
            } else {
              callback()
            }
          }
        }],
        measureHigh: [{
          trigger: 'blur',
          validator: (rule, value, callback) => {
            if (+value > 100) {
              callback(new Error('高最多100'))
            } else {
              callback()
            }
          }
        }]

      }
    }
  },
  methods: {
    close() {
      this.rulesForm = {
        allowableLoad: null, // 重量
        allowableVolume: '', // 体积
        name: '', // 车辆类型
        measureLong: 0.0, // 长
        measureWidth: 0.0, // 宽
        measureHigh: 0.0// 高
      }
      this.$refs.form.resetFields() // 重置表单
      this.$emit('update:dialogVisible', false)
    },
    Confirm() {
      this.$refs.form.validate((isOK) => {
        if (isOK
        ) {
          this.$emit('Confirm', this.rulesForm)
        }
      })
    },
    async detail() {
      if (this.id) {
        this.title = '编辑车型'
      } else {
        this.title = '新增车型'
      }
      console.log(this.id)
      const { data } = await detail(this.id)
      this.rulesForm = data
      // console.log(this.rulesForm)
    }
  }
}
</script>
